<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="tiaoz()">添加</button>
		<table border="1">
			
		<thead>
			<tr>
				<th>序号</th>
				<th>书名</th>
				<th>日期</th>
				<th>单价</th>
				<th>数量</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			
		</tbody>
		
		</table>
		总价格：<span id="ret_span"></span>
		<script>
			let books=[
				{id:1,name:'java从入门到飞起',tdate:'2020-07-01',price:60,count:1},
				{id:2,name:'android从入门到飞起',tdate:'2020-07-02',price:60,count:1},
				{id:3,name:'PHP从入门到飞起',tdate:'2020-07-03',price:60,count:1},
				{id:4,name:'mysql从入门到飞起',tdate:'2020-07-04',price:60,count:1},
				{id:5,name:'C++从入门到飞起',tdate:'2020-07-05',price:60,count:1}
			]
			//把数组保存到
			let data=sessionStorage.getItem("data");
			if (data) {
				books=JSON.parse(data);
				
			}else{
				
			sessionStorage.setItem("data",JSON.stringify(books));
			}
			let table=document.getElementsByTagName("table")[0];
			let tbody=document.getElementsByTagName("tbody")[0];
			updeta();
			getTotal();
			function updeta(){
				for(let index in books){
					let item =books[index];
				 let tr=document.createElement("tr");
					tbody.appendChild(tr);
					for (let val in item) {
						let text=item[val];
						let isHtml=false;
						if (val==="name") {
							text=`<a onclick="edit(${index})" >${text}</a>`;
							isHtml=true;
						}else if(val==='count'){
							text=`
							<Button type="Button" onclick="jian(${index})">-</Button>
							<span>${text}</span>
							<Button type="Button" onclick="jia(${index})">+</Button>
							`;
							isHtml=true;
						}
						appendTd(tr,text,isHtml);
					}
					let opt=`<Button>编辑</Button>
				               <Button onclick="del(${index})">删除</Button>  `;
						appendTd(tr,opt,true);
				}
			}
			
			function appendTd(tr,value,isHtml){
				let td=document.createElement("td");
				if(isHtml){
					td.innerHTML=value;
				}else{
					td.innerText=value;
				}
				tr.appendChild(td);
			}
			function tiaoz(){
				sessionStorage.setItem("item",null);
				window.location.href='作业第二页.html';
			}
			function edit(index){
				let item=books[index];
				sessionStorage.setItem("index",index);
				sessionStorage.setItem("item",JSON.stringify(item));
				window.location.href='作业第二页.html';
			}
			function del(index){
				let node= tbody.childNodes[index+1];
				tbody.removeChild(node);
				books.splice(index,1);
			}
			function jia(index){
				let item =books[index];
				item.count++;
				let node=tbody.childNodes[index+1];
				let span= node.getElementsByTagName("span")[0];
				span.innerText=item.count;
				getTotal();
			}
			function jian(index){
				let item =books[index];
				if (item.count===1) {
					return;
				}
				item.count--;
				let node=tbody.childNodes[index+1];
				let span= node.getElementsByTagName("span")[0];
				span.innerText=item.count;
				getTotal();
			}
			function getTotal(){
				let total=0;
				for (let item of books) {
					total+=item.price*item.count;
				}
				document.getElementById("ret_span").innerText=total;
			}
		</script>
	</body>
	
</html>
